<script setup lang="ts">
import { ref, watch, computed, onMounted } from 'vue'
import { roleStore } from '@/stores/role'
import { headersStore } from '@/stores/apiHeader'
// 全球业绩
import FlexRight from '@/components/Echart/flexGlobal/flexRight.vue'
// 新老会员业绩占比
import NewOldPie from '@/components/PermissionsModule/Performance/components/NewOldPie.vue'
// 零售业绩与拓展业绩占比
import RetailPie from '@/components/PermissionsModule/Performance/components/RetailPie.vue'
// 国家业绩同比
import countryPerformanceYoY from '@/components/PermissionsModule/Performance/components/countryPerformanceYoY.vue'
// 国家业绩环比
import nationalPerformanceMoM from '@/components/PermissionsModule/Performance/components/nationalPerformanceMoM.vue'
// 国家去年对比
import nationalComparisonLastYear from '@/components/PermissionsModule/Performance/components/nationalComparisonLastYear.vue'
// 业绩达成率
import nationalPerformanceGauge from '@/components/PermissionsModule/Performance/components/nationalPerformanceGauge.vue'
// 全球业绩趋势
import globalPerformanceLine from '@/components/PermissionsModule/Performance/components/globalPerformanceLine.vue'
// 各大区业绩占比
import AreaPie from '@/components/PermissionsModule/Performance/components/AreaPie.vue'
// 全球各区业绩环比
import globalPerformanceRatio from '@/components/PermissionsModule/Performance/components/globalPerformanceRatio.vue'
// 全球各区业绩同比
import globalPerformanceYoY from '@/components/PermissionsModule/Performance/components/globalPerformanceYoY.vue'
const props = defineProps({
  showRemainingComponents: {
    type: Boolean,
    default: false,
  },
})
const store = roleStore() as any
const { businessLevel } = store
//获取当前月份
const month = computed(() => {
  return headersStore().month
})
const rule = ref() // 1 普通 2 中级 3 高级
const info = () => {
  rule.value = businessLevel
}
info()
// 1 全球 2 区域 3 国家
const newRole = ref(0)
newRole.value = businessLevel // 初始化面板权限

// 深度监听 store.businessLevel
watch(
  () => store.businessLevel,
  (newVal) => {
    newRole.value = newVal
  }
)
</script>

<template>
  <FlexRight v-if="newRole != 0" />
  <globalPerformanceLine :level="newRole" v-if="newRole != 0" />
  <NewOldPie :level="newRole" v-if="newRole != 0" />
  <RetailPie :level="newRole" v-if="newRole != 0" />
  <div v-if="showRemainingComponents">
    <nationalPerformanceGauge v-if="newRole == 3" />
    <AreaPie :level="newRole" v-if="newRole == 1" />
    <globalPerformanceYoY
      v-if="
        (month !== '00' && newRole == 1) || (month !== '00' && newRole == 2)
      "
    />
    <globalPerformanceRatio v-if="newRole == 1 || newRole == 2" />
    <countryPerformanceYoY v-if="newRole == 3 && month !== '00'" />
    <nationalPerformanceMoM v-if="newRole == 3 && month !== '00'" />
    <nationalComparisonLastYear v-if="newRole == 3 && month == '00'" />
  </div>
</template>

<style lang="scss" scoped></style>
